<template>
  <div>
   <el-card>
    <h3 class="title">协会信息</h3>
     <el-form :model="form"  label-width="120px">
       <el-form-item label="协会介绍">
         <el-input v-model="form.introduction" type="textarea" />
       </el-form-item>
       <el-form-item label="组织架构">
         <el-input v-model="form.structure" type="textarea" />
       </el-form-item>
       <el-form-item label="协会章程">
         <el-input v-model="form.statutes" type="textarea" />
       </el-form-item>
       <el-form-item label="联系协会">
         <el-input v-model="form.contact" type="textarea" />
       </el-form-item>
       <el-form-item label="加入协会的意义">
         <el-input v-model="form.significance" type="textarea" />
       </el-form-item>
       <el-form-item label="入会申请表">
          <el-upload
              v-model:file-list="form.applicationForm2"
              class="upload-demo"
              action="http://localhost:8080/common/upload"
              multiple
              :limit="3"
              :on-success="handleUploadSuccess"
              :on-preview="handleDownloadSuccess">
            <el-button type="primary">上传文件</el-button>
        </el-upload>
        </el-form-item>
       <el-form-item>
      <el-button type="primary" @click="onSubmit" >提交保存</el-button>
    </el-form-item>
    </el-form>
   </el-card>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted,ref,reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import{ getAssociation,updateAssociation,downloadFile } from '../../api/association'
//响应数据格式
const form = ref({
  id:'',
  introduction:'',
  structure:'',
  statutes:'',
  contact:'',
  significance:'',
  applicationForm:'',
  del_flag:'',
  applicationForm2:[]
})
onMounted(()=>{
    loadAssociation()
})
// 获取协会信息
const loadAssociation=async()=>{
  try {
    let response = await getAssociation()
    //设置文件路径
    //获取文件的路径(就是文件的名称)

    let path = response.data.applicationForm
    if(path){
      let fileName = path.split("_").slice(1,).join("_")
      response.data.applicationForm2=[{ 
        name:fileName,
        response:{
          data:path
        }
      }]
    }
    form.value = response.data
    //form.value.applicationForm = response.data.applicationForm2.data
    ElMessage.success("获取成功")
  } catch (error) {
    ElMessage.error("获取失败")
  }
}
// 修改协会信息
const update = async()=>{
  try{
    let formData = JSON.parse(JSON.stringify(form.value))
    let response = await updateAssociation(formData)
    ElMessage.success(response.message)
  }catch(error){
    ElMessage.error("修改失败")
  }
}


// 文件上传
const handleUploadSuccess = async (file)=>{
  ElMessage.success("上传成功")
}

// 文件下载
const handleDownloadSuccess = async(file)=>{
  await downloadFile(file.response.data)
}

//提交保存
const onSubmit = async() => {
  try{
    await ElMessageBox.confirm(
        '确定提交吗?',
        '提交',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
    update()
  }catch(error){
    ElMessage.error("取消保存")
  }
  
}


</script>




<style scoped>
.title{
  text-align:center;
  margin-bottom:20px;
}
.upload-demo{
  width: 100%;
}
</style>